<template>
  <div>
    <Row>
      <Card>
        <Icon type="md-people"></Icon>
        轮播图列表
      </Card>
      <Card>
        <div style="display: flex;flex-direction: row-reverse">
          <Button type="primary" @click="add" >新增</Button>
        </div>
        <div class="edittable-con-1 list" style="">
          <Table border ref="selection" :columns="columns" :data="list"></Table>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import { getSliderList, delSlider } from '@/api/slider'

  export default {
    name: 'slider-list',
    data () {
      return {
        columns: [
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 100
          },
          {
            title: '排序值',
            align: 'center',
            key: 'sort',
            width: 100
          },
          {
            title: '标题',
            align: 'center',
            key: 'title',
          },
          {
            title: '图片',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('img', {
                  style: {
                    width: '80px',
                    height: '80px',
                    margin: '10px auto',
                    display: 'block'
                  },
                  attrs: { src: params.row.imgUrl}
                })
              ])
            }
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime'
          },
          {
            title: '状态',
            align: 'center',
            width: 100,
            render: (h, params) => {
              switch (params.row.status) {
                case 1:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '展示');
                  break
                case 2:
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '下架');
                  break
              }
            }
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: { marginRight: '10px',marginBottom: '5px' },
                  on: {
                    click: () => {
                      this.goDetail(params.row.id)
                    }
                  }
                }, '查看详情'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.del(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ])
            }
          }
        ],
        list: [],
        pageId: 1,
        totalPage: 10
      }
    },
    methods: {
      getList () {
        getSliderList(this.pageId).then(data => {
          this.list = data.data
          this.pageId = data.current_page
          this.totalPage = data.total
        })
      },
      add () {
        this.$router.push('slider_detail')
      },
      goDetail (id) {
        this.$router.push({
          name: 'slider_detail',
          query: {
            id: id
          }
        })
      },
      search () {
        if (arguments[0]) {
          this.searchObj.pageId = arguments[0]
        }
        this.getList()
      },
      del (id) {
        delSlider(id).then(() => {
          this.$Message.success('删除成功')
          this.getList()
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
